React useFormState Validation Pipeline: การจัดการการตรวจสอบแบบหลายขั้นตอน

การสร้างแบบฟอร์มที่ซับซ้อนพร้อมการตรวจสอบที่แข็งแกร่งเป็นความท้าทายทั่วไปในการพัฒนาเว็บสมัยใหม่ useFormState hook ของ React นำเสนอวิธีที่มีประสิทธิภาพและยืดหยุ่นในการจัดการสถานะของฟอร์มและข้อผิดพลาดในการตรวจสอบ ทำให้สามารถสร้างไปป์ไลน์การตรวจสอบแบบหลายขั้นตอนที่ซับซ้อนได้ คู่มือที่ครอบคลุมนี้จะแนะนำคุณตลอดกระบวนการ ตั้งแต่การทำความเข้าใจพื้นฐานไปจนถึงการนำกลยุทธ์การตรวจสอบแบบอะซิงโครนัสขั้นสูงไปใช้

ทำไมต้องมีการตรวจสอบแบบฟอร์มหลายขั้นตอน?

การตรวจสอบแบบฟอร์มแบบขั้นตอนเดียวแบบดั้งเดิมอาจกลายเป็นเรื่องยุ่งยากและไม่มีประสิทธิภาพ โดยเฉพาะอย่างยิ่งเมื่อต้องจัดการกับฟอร์มที่มีช่องข้อมูลจำนวนมากหรือการอ้างอิงที่ซับซ้อน การตรวจสอบแบบหลายขั้นตอนช่วยให้คุณ:

• ปรับปรุงประสบการณ์ผู้ใช้: ให้ข้อเสนอแนะทันทีเกี่ยวกับส่วนต่างๆ ของฟอร์ม เพื่อนำผู้ใช้ผ่านกระบวนการกรอกข้อมูลได้อย่างมีประสิทธิภาพมากขึ้น
• เพิ่มประสิทธิภาพ: หลีกเลี่ยงการตรวจสอบที่ไม่จำเป็นในฟอร์มทั้งหมด ทำให้ประสิทธิภาพดีขึ้น โดยเฉพาะสำหรับฟอร์มขนาดใหญ่
• เพิ่มความสามารถในการบำรุงรักษาโค้ด: แบ่งตรรกะการตรวจสอบออกเป็นหน่วยเล็กๆ ที่จัดการได้ง่าย ทำให้โค้ดเข้าใจ ทดสอบ และบำรุงรักษาได้ง่ายขึ้น

ทำความเข้าใจ useFormState

useFormState hook (ซึ่งมักมีอยู่ในไลบรารีเช่น react-use หรือการใช้งานที่กำหนดเอง) นำเสนอวิธีการจัดการสถานะของฟอร์ม ข้อผิดพลาดในการตรวจสอบ และการจัดการการส่งข้อมูล ฟังก์ชันหลักประกอบด้วย:

• การจัดการสถานะ: จัดเก็บค่าปัจจุบันของช่องข้อมูลในฟอร์ม
• การตรวจสอบ: ดำเนินการกฎการตรวจสอบกับค่าในฟอร์ม
• การติดตามข้อผิดพลาด: ติดตามข้อผิดพลาดในการตรวจสอบที่เกี่ยวข้องกับแต่ละช่องข้อมูล
• การจัดการการส่งข้อมูล: มีกลไกสำหรับการส่งฟอร์มและจัดการผลลัพธ์การส่งข้อมูล

การสร้างไปป์ไลน์การตรวจสอบพื้นฐาน

เรามาเริ่มต้นด้วยตัวอย่างฟอร์มแบบสองขั้นตอนอย่างง่าย: ข้อมูลส่วนบุคคล (ชื่อ, อีเมล) และข้อมูลที่อยู่ (ถนน, เมือง, ประเทศ)

ขั้นตอนที่ 1: กำหนดสถานะของฟอร์ม

ก่อนอื่น เรากำหนดสถานะเริ่มต้นของฟอร์ม ซึ่งรวมถึงช่องข้อมูลทั้งหมด:

const initialFormState = {
  firstName: '',
  lastName: '',
  email: '',
  street: '',
  city: '',
  country: '',
};

ขั้นตอนที่ 2: สร้างกฎการตรวจสอบ

ถัดไป เรากำหนดกฎการตรวจสอบของเรา สำหรับตัวอย่างนี้ เราจะกำหนดให้ทุกช่องต้องไม่ว่างและตรวจสอบให้แน่ใจว่าอีเมลมีรูปแบบที่ถูกต้อง

const validateField = (fieldName, value) => {
  if (!value) {
    return 'This field is required.';
  }

  if (fieldName === 'email' && !/^[\w\c-\f\-.]+@([\w\c-\f\-\.]+.)+[\w\c-\f\-\\q-\z]{2,4}$/.test(value)) {
    return 'Invalid email format.';
  }

  return null; // No error
};

ขั้นตอนที่ 3: นำ useFormState hook ไปใช้

ตอนนี้ เรามาผสานรวมกฎการตรวจสอบเข้ากับคอมโพเนนต์ React ของเราโดยใช้ useFormState hook (สมมติ):

import React, { useState } from 'react';

// สมมติว่าเป็นการใช้งานที่กำหนดเองหรือไลบรารีเช่น react-use
const useFormState = (initialState) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });

    // ตรวจสอบเมื่อมีการเปลี่ยนแปลงเพื่อประสบการณ์ผู้ใช้ที่ดีขึ้น (ไม่บังคับ)
    setErrors({ ...errors, [name]: validateField(name, value) });
  };

  const validateFormStage = (fields) => {
    const newErrors = {};
    let isValid = true;
    fields.forEach(field => {
      const error = validateField(field, values[field]);
      if (error) {
        newErrors[field] = error;
        isValid = false;
      }
    });
    setErrors({...errors, ...newErrors}); //รวมกับข้อผิดพลาดที่มีอยู่
    return isValid;
  };

  const clearErrors = (fields) => {
    const newErrors = {...errors};
    fields.forEach(field => delete newErrors[field]);
    setErrors(newErrors);
  };

  return {
    values,
    errors,
    handleChange,
    validateFormStage,
    clearErrors,
  };
};


const MyForm = () => {
  const { values, errors, handleChange, validateFormStage, clearErrors } = useFormState(initialFormState);
  const [currentStage, setCurrentStage] = useState(1);

  const handleNextStage = () => {
    let isValid;
    if (currentStage === 1) {
        isValid = validateFormStage(['firstName', 'lastName', 'email']);
    } else {
        isValid = validateFormStage(['street', 'city', 'country']);
    }

    if (isValid) {
      setCurrentStage(currentStage + 1);
    }
  };

  const handlePreviousStage = () => {
    if(currentStage > 1){
      if(currentStage === 2){
        clearErrors(['firstName', 'lastName', 'email']);
      } else {
        clearErrors(['street', 'city', 'country']);
      }
      setCurrentStage(currentStage - 1);
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const isValid = validateFormStage(['firstName', 'lastName', 'email', 'street', 'city', 'country']);
    if (isValid) {
      // Submit the form
      console.log('Form submitted:', values);
      alert('Form submitted!'); //Replace with actual submission logic
    } else {
      console.log('Form has errors, please correct them.');
    }
  };

  return (
    

      {currentStage === 1 && (
        

          
Personal Information
          
            First Name:
            
            {errors.firstName && {errors.firstName}}
          
          

          
            Last Name:
            
            {errors.lastName && {errors.lastName}}
          
          

          
            Email:
            
            {errors.email && {errors.email}}
          
          

        
      )}

      {currentStage === 2 && (
        

          
Address Information
          
            Street:
            
            {errors.street && {errors.street}}
          
          

          
            City:
            
            {errors.city && {errors.city}}
          
          

          
            Country:
            
            {errors.country && {errors.country}}
          
          

        
      )}

      

        {currentStage > 1 && Previous}
        {currentStage < 2 && Next}
        {currentStage === 2 && Submit}
      
    
  );
};

export default MyForm;

ขั้นตอนที่ 4: นำการนำทางขั้นตอนไปใช้

ใช้ตัวแปรสถานะเพื่อจัดการขั้นตอนปัจจุบันของฟอร์มและแสดงส่วนฟอร์มที่เหมาะสมตามขั้นตอนปัจจุบัน

เทคนิคการตรวจสอบขั้นสูง

การตรวจสอบแบบอะซิงโครนัส

บางครั้งการตรวจสอบอาจต้องมีการโต้ตอบกับเซิร์ฟเวอร์ เช่น การตรวจสอบว่าชื่อผู้ใช้มีอยู่หรือไม่ สิ่งนี้จำเป็นต้องมีการตรวจสอบแบบอะซิงโครนัส นี่คือวิธีที่จะรวมเข้าด้วยกัน:

const validateUsername = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.available) {
      return null; // Username is available
    } else {
      return 'Username is already taken.';
    }
  } catch (error) {
    console.error('Error checking username:', error);
    return 'Error checking username. Please try again.'; // Handle network errors gracefully
  }
};

const useFormStateAsync = (initialState) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });
  };

  const validateFieldAsync = async (fieldName, value) => {
    if (fieldName === 'username') {
      return await validateUsername(value);
    }
    return validateField(fieldName, value);
  };


  const handleSubmit = async (event) => {
      event.preventDefault();
      setIsSubmitting(true);
      let newErrors = {};
      let isValid = true;

      for(const key in values){
        const error = await validateFieldAsync(key, values[key]);
        if(error){
          newErrors[key] = error;
          isValid = false;
        }
      }

      setErrors(newErrors);
      setIsSubmitting(false);

      if (isValid) {
        // Submit the form
        console.log('Form submitted:', values);
        alert('Form submitted!'); //Replace with actual submission logic
      } else {
        console.log('Form has errors, please correct them.');
      }
  };



  return {
    values,
    errors,
    handleChange,
    handleSubmit,
    isSubmitting //Optional: display loading message during validation
  };
};

ตัวอย่างนี้รวมฟังก์ชัน validateUsername ที่ทำการเรียก API เพื่อตรวจสอบความพร้อมใช้งานของชื่อผู้ใช้ ตรวจสอบให้แน่ใจว่าคุณจัดการข้อผิดพลาดเครือข่ายที่อาจเกิดขึ้นและให้ข้อเสนอแนะที่เหมาะสมแก่ผู้ใช้

การตรวจสอบตามเงื่อนไข

บางฟิลด์อาจต้องการการตรวจสอบตามค่าของฟิลด์อื่นเท่านั้น ตัวอย่างเช่น ฟิลด์ "เว็บไซต์บริษัท" อาจจำเป็นเฉพาะเมื่อผู้ใช้ระบุว่าพวกเขาทำงานอยู่ นำการตรวจสอบตามเงื่อนไขไปใช้ภายในฟังก์ชันการตรวจสอบของคุณ:

const validateFieldConditional = (fieldName, value, formValues) => {
  if (fieldName === 'companyWebsite' && formValues.employmentStatus === 'employed' && !value) {
    return 'Company website is required if you are employed.';
  }
  return validateField(fieldName, value); // Delegate to basic validation
};

กฎการตรวจสอบแบบไดนามิก

บางครั้งกฎการตรวจสอบเองอาจต้องเป็นแบบไดนามิก โดยพิจารณาจากปัจจัยภายนquement ภายนอกหรือข้อมูล คุณสามารถทำได้โดยการส่งกฎการตรวจสอบแบบไดนามิกเป็นอาร์กิวเมนต์ไปยังฟังก์ชันการตรวจสอบของคุณ:

const validateFieldWithDynamicRules = (fieldName, value, rules) => {
  if (rules && rules[fieldName] && rules[fieldName].maxLength && value.length > rules[fieldName].maxLength) {
    return `This field must be less than ${rules[fieldName].maxLength} characters.`;
  }
  return validateField(fieldName, value); // Delegate to basic validation
};

การจัดการข้อผิดพลาดและประสบการณ์ผู้ใช้

การจัดการข้อผิดพลาดที่มีประสิทธิภาพมีความสำคัญต่อประสบการณ์ผู้ใช้ที่ดี พิจารณาสิ่งต่อไปนี้:

• แสดงข้อผิดพลาดอย่างชัดเจน: วางข้อความข้อผิดพลาดใกล้กับช่องอินพุตที่เกี่ยวข้อง ใช้ภาษาที่ชัดเจนและกระชับ
• การตรวจสอบแบบเรียลไทม์: ตรวจสอบฟิลด์ขณะที่ผู้ใช้พิมพ์ โดยให้ข้อเสนอแนะทันที โปรดคำนึงถึงผลกระทบต่อประสิทธิภาพ; ใช้ debounce หรือ throttle การเรียกใช้การตรวจสอบหากจำเป็น
• เน้นที่ข้อผิดพลาด: หลังจากการส่ง ให้เน้นความสนใจของผู้ใช้ไปยังฟิลด์แรกที่มีข้อผิดพลาด
• การเข้าถึง: ตรวจสอบให้แน่ใจว่าข้อความข้อผิดพลาดสามารถเข้าถึงได้สำหรับผู้ใช้ที่มีความพิการ โดยใช้ ARIA attributes และ semantic HTML
• การทำให้เป็นสากล (i18n): ใช้การทำให้เป็นสากลอย่างเหมาะสมเพื่อแสดงข้อความข้อผิดพลาดในภาษาที่ผู้ใช้ต้องการ บริการเช่น i18next หรือ API ของ JavaScript Intl สามารถช่วยเหลือได้

แนวทางปฏิบัติที่ดีที่สุดสำหรับการตรวจสอบแบบฟอร์มหลายขั้นตอน

• รักษากฎการตรวจสอบให้กระชับ: แบ่งตรรกะการตรวจสอบที่ซับซ้อนออกเป็นฟังก์ชันที่เล็กและนำมาใช้ซ้ำได้
• ทดสอบอย่างละเอียด: เขียน unit tests เพื่อให้แน่ใจว่ากฎการตรวจสอบของคุณถูกต้องและเชื่อถือได้
• ใช้ไลบรารีการตรวจสอบ: พิจารณาใช้ไลบรารีการตรวจสอบเฉพาะ (เช่น Yup, Zod) เพื่อทำให้กระบวนการง่ายขึ้นและปรับปรุงคุณภาพโค้ด ไลบรารีเหล่านี้มักจะมีการตรวจสอบตาม schema ทำให้ง่ายต่อการกำหนดและจัดการกฎการตรวจสอบที่ซับซ้อน
• เพิ่มประสิทธิภาพ: หลีกเลี่ยงการตรวจสอบที่ไม่จำเป็น โดยเฉพาะอย่างยิ่งระหว่างการตรวจสอบแบบเรียลไทม์ ใช้เทคนิค memoization เพื่อแคชผลลัพธ์การตรวจสอบ
• ให้คำแนะนำที่ชัดเจน: แนะนำผู้ใช้ผ่านกระบวนการกรอกฟอร์มด้วยคำแนะนำที่ชัดเจนและคำแนะนำที่เป็นประโยชน์
• พิจารณา Progressive Disclosure: แสดงเฉพาะฟิลด์ที่เกี่ยวข้องสำหรับแต่ละขั้นตอน ทำให้ฟอร์มง่ายขึ้นและลดภาระทางความคิด

ไลบรารีและแนวทางอื่น ๆ

แม้ว่าคู่มือนี้จะเน้นที่ useFormState hook ที่กำหนดเอง แต่มีไลบรารีฟอร์มที่ยอดเยี่ยมหลายแห่งที่นำเสนอการทำงานที่คล้ายคลึงกัน ซึ่งมักจะมีคุณสมบัติเพิ่มเติมและการปรับปรุงประสิทธิภาพ ไลบรารีทางเลือกยอดนิยม ได้แก่:

• Formik: ไลบรารีที่ใช้กันอย่างแพร่หลายสำหรับการจัดการสถานะฟอร์มและการตรวจสอบใน React นำเสนอแนวทางเชิงประกาศสำหรับการจัดการฟอร์มและรองรับกลยุทธ์การตรวจสอบที่หลากหลาย
• React Hook Form: ไลบรารีที่เน้นประสิทธิภาพ ซึ่งใช้ประโยชน์จาก uncontrolled components และ React's ref API เพื่อลดการ re-renders นำเสนอประสิทธิภาพที่ยอดเยี่ยมสำหรับฟอร์มขนาดใหญ่และซับซ้อน
• Final Form: ไลบรารีที่หลากหลายซึ่งรองรับ UI frameworks และไลบรารีการตรวจสอบที่หลากหลาย นำเสนอ API ที่ยืดหยุ่นและขยายได้สำหรับการปรับแต่งพฤติกรรมฟอร์ม

การเลือกไลบรารีที่เหมาะสมขึ้นอยู่กับความต้องการและความชอบเฉพาะของคุณ พิจารณาปัจจัยต่างๆ เช่น ประสิทธิภาพ ความง่ายในการใช้งาน และชุดคุณสมบัติเมื่อทำการตัดสินใจ

ข้อควรพิจารณาเกี่ยวกับนานาชาติ

เมื่อสร้างฟอร์มสำหรับผู้ชมทั่วโลก สิ่งสำคัญคือต้องพิจารณาการทำให้เป็นสากลและการแปล นี่คือประเด็นสำคัญ:

• รูปแบบวันที่และเวลา: ใช้รูปแบบวันที่และเวลาที่เฉพาะเจาะจงตามภาษา เพื่อให้มั่นใจถึงความสอดคล้องและหลีกเลี่ยงความสับสน
• รูปแบบตัวเลข: ใช้รูปแบบตัวเลขที่เฉพาะเจาะจงตามภาษา รวมถึงสัญลักษณ์สกุลเงินและตัวคั่นทศนิยม
• รูปแบบที่อยู่: ปรับช่องที่อยู่ให้เข้ากับรูปแบบประเทศที่แตกต่างกัน บางประเทศอาจต้องการรหัสไปรษณีย์ก่อนเมือง ในขณะที่บางประเทศอาจไม่มีรหัสไปรษณีย์เลย
• การตรวจสอบหมายเลขโทรศัพท์: ใช้ไลบรารีการตรวจสอบหมายเลขโทรศัพท์ที่รองรับรูปแบบหมายเลขโทรศัพท์ระหว่างประเทศ
• การเข้ารหัสอักขระ: ตรวจสอบให้แน่ใจว่าฟอร์มของคุณจัดการชุดอักขระที่แตกต่างกันได้อย่างถูกต้อง รวมถึง Unicode และอักขระที่ไม่ใช่ภาษาละตินอื่น ๆ
• เลย์เอาต์ขวาไปซ้าย (RTL): รองรับภาษา RTL เช่น ภาษาอาหรับและภาษาฮิบรู โดยปรับเลย์เอาต์ฟอร์มให้เหมาะสม

โดยการพิจารณาแง่มุมระหว่างประเทศเหล่านี้ คุณสามารถสร้างฟอร์มที่เข้าถึงได้และใช้งานง่ายสำหรับผู้ชมทั่วโลก

สรุป

การนำไปใช้ไปป์ไลน์การตรวจสอบแบบฟอร์มหลายขั้นตอนด้วย useFormState hook ของ React (หรือไลบรารีทางเลือก) สามารถปรับปรุงประสบการณ์ผู้ใช้ได้อย่างมาก เพิ่มประสิทธิภาพ และเพิ่มความสามารถในการบำรุงรักษาโค้ด ด้วยการทำความเข้าใจแนวคิดหลักและนำแนวทางปฏิบัติที่ดีที่สุดที่ระบุไว้ในคู่มือนี้ไปใช้ คุณสามารถสร้างฟอร์มที่แข็งแกร่งและปรับขนาดได้ซึ่งตรงตามความต้องการของแอปพลิเคชันเว็บสมัยใหม่

อย่าลืมให้ความสำคัญกับประสบการณ์ผู้ใช้ ทดสอบอย่างละเอียด และปรับกลยุทธ์การตรวจสอบของคุณให้เข้ากับข้อกำหนดเฉพาะของโครงการของคุณ ด้วยการวางแผนและการดำเนินการอย่างรอบคอบ คุณสามารถสร้างฟอร์มที่ใช้งานได้จริงและสนุกกับการใช้งาน

เรียนรู้เพิ่มเติม

• React Official Documentation
• Formik Documentation
• React Hook Form Documentation